<template>
  <div class="login-container">
    <div class="login-form">
      <div class="login-box">
        <h3 class="title">HACT门店管理平台</h3>
        <mt-field class="login-name" placeholder="请输入登录账户" v-model="loginForm.login_name"></mt-field>
        <mt-field class="login-pass" placeholder="请输入登录密码" type="password" v-model="loginForm.login_password"></mt-field>
        <mt-field class="login-code" placeholder="请输入验证码" v-model="loginForm.sRand">
          <img :src="codeImgSrc" height="45px" width="100px" @click="ValidateCode">
        </mt-field>
        <mt-button type="primary" class="login-button" size="large" @click.native.prevent="handleLogin">登录</mt-button>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style lang="scss" scoped>
.login-container {
  background-color: #2d3a4b;
  width: 100%;
  height: 100vh;
  .login-form {
    width: 100%;
    height: 100%;
    position: absolute;
    .login-box {
      margin: 120px 40px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      background-clip: padding-box;
      height: 285px;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid #938c8c;
      -webkit-box-shadow: 0 0 25px #cac6c6;
      box-shadow: 0 0 9px #cac6c6;
      padding: 35px 15px 15px;
      .title {
        font-size: 18px;
        font-weight: 400;
        color: #eeeeee;
        margin: 0 auto 30px;
        text-align: center;
        font-weight: bold;
        letter-spacing: 1px;
      }
      .mint-cell {
        background: rgba(0, 0, 0, 0.1);
        color: #454545;
      }
      .login-name {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        .mint-cell-wrapper {
          background-size: 100% 0px;
          input {
            background: transparent;
            color: #fff;
          }
          .mintui {
            color: #f4f6ff;
          }
        }
      }

      .login-pass {
        .mint-cell-wrapper {
          background-size: 100% 1px;
          input {
            background: transparent;
            color: #fff;
          }
          .mintui {
            color: #f4f6ff;
          }
        }
      }

      .login-code {
        .mint-cell-wrapper {
          background-size: 100% 1px;
          input {
            background: transparent;
            color: #fff;
          }
          .mintui {
            color: #f4f6ff;
          }
        }
        padding-bottom: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }

      .login-button {
        margin: 15px 0px;
      }
    }
  }
}
</style>
